<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <el-form>
        <!--        <el-row>-->
        <!--          <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
        <!--          <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>-->
        <!--          <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
        <!--        </el-row>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="员工账号：" label-width="110px">
              <el-input
                v-model="formData.employeeNumber"
                placeholder="请输入员工账号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工姓名：" label-width="110px">
              <el-input
                v-model="formData.name"
                placeholder="请输入员工姓名"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作模式：" label-width="110px">
              <!--              <el-input-->
              <!--                v-model="formData.workPatternId"-->
              <!--                placeholder="请选择工作模式"-->
              <!--                style="width: 200px"-->
              <!--              ></el-input>-->
              <el-select
                v-model="formData.workPatternId"
                placeholder="请选择工作模式"
              >
                <el-option
                  v-for="item in array"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="8">
            <el-form-item label="选择月：" label-width="110px">
              <el-date-picker
                v-model="formData.month"
                type="month"
                placeholder="请选择月份"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所属机构："
              label-width="110px"
              style="margin-left: 47px"
            >
              <el-select
                ref="selectRef"
                v-model="formData.agencyId"
                placeholder="请选择所属机构"
                style="width: 200px"
              >
                <el-option
                  :value="formData.agencyId"
                  :label="label"
                  style="height: auto"
                >
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-left: 100px">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-row type="flex" justify="left" style="margin-bottom: 20px">
        <el-button type="primary">排班设置</el-button>
        <el-button
          style="background: #ffeeeb; color: #e15536; border: 1px solid #e15536"
          >绑定排班</el-button
        >
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column type="selection" width="55" fixed> </el-table-column>
        <el-table-column
          prop="employeeNumber"
          label="员工账号"
          width="120"
          fixed
        >
        </el-table-column>
        <el-table-column prop="name" label="员工姓名" width="120" fixed>
        </el-table-column>
        <el-table-column prop="phone" label="员工电话" width="120" fixed>
        </el-table-column>
        <el-table-column prop="userType" label="员工角色" width="120" fixed>
        </el-table-column>
        <el-table-column
          prop="workPatternName"
          label="当前工作模式"
          width="120"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="workSchedules"
          v-for="(item, index) in 31"
          :key="index"
          :label="String(index + 1)"
        >
          <template #default="{ row }">
            <div :class="row.workSchedules[index] ? 'work' : 'rest'">
              {{ row.workSchedules[index] ? "上" : "休" }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getTreeListApi } from "@/api/organization-manage";
import { getSelectApi, getWorkSchedulingApi } from "@/api/employees";
const userTypeMap = {
  1: "员工",
  2: "快递员",
  3: "司机",
};

export default {
  name: "WorkArrangePage",
  data() {
    return {
      tableData: [],
      value: "",
      formData: {
        page: 1,
        pageSize: 10,
        employeeNumber: "",
        name: "",
        workPatternId: "",
        month: "",
        agencyId: "",
      },
      treeData: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      label: "",
      // list: {
      //   page: 1,
      //   pageSize: 10,
      // },
      total: 0,
      workSchedules: [],
      array: [],
    };
  },
  created() {
    this.getWorkScheduling();
    this.getTreeList();
    this.getSelect();
  },
  methods: {
    async getSelect() {
      const res = await getSelectApi();
      console.log(res);
      this.array = [...res.data[1], ...res.data[2]];
      console.log(this.array);
    },
    async getWorkScheduling() {
      const res = await getWorkSchedulingApi(this.formData);
      console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
      this.tableData.forEach((item) => {
        item.userType = userTypeMap[item.userType];
      });
    },
    handleNodeClick(data) {
      console.log(data);
      this.label = data.name;
      this.formData.agencyId = data.id;
      this.$refs.selectRef.blur();
    },
    search() {
      this.getWorkScheduling();
    },
    resetFn() {
      (this.formData = {
        employeeNumber: "",
        name: "",
        workPatternId: "",
        month: "",
        agencyId: "",
      }),
        (this.label = "");
      this.getWorkScheduling();
    },
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      // console.log(this.treeData);
    },
    handleCurrentChange(a) {
      // console.log(a);
      this.list.page = a;
      this.getWorkScheduling();
    },
    handleSizeChange(a) {
      // console.log(a);
      this.list.pageSize = a;
      this.getWorkScheduling();
    },
  },
};
</script>

<style lang="scss" scoped>
.work {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #ffeeeb;
  border-radius: 50%;
  color: #f56c6c;
  border: 1px solid #f56c6c;
}
.rest {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #eff3f8;
  border-radius: 50%;
  border: 1px solid #dfe3e9;
}
</style>
